@import '../../colors.scss';

.input.simple {
	width: 100%;

	&>.body {
		border: 0;

		&>input {
			background-color: transparent;
			border: 0px;
			outline: 0;
			margin: 0;
			padding: 0;
			width: 100%;
			font: {
				size: 18px;
			}
		}
	}
}

.input.number {
	display: grid;
	grid-template-columns: 30px 1fr 30px;

	&>.button {
		color: $black_2;
		font: {
			size: 18px;
			weight: 600;
		}
		padding: 10px 10px;
		transition: all .1s ease;
		user-select: none;

		&:hover {
			cursor: pointer;
			text-shadow: 0 0 2px $gray_1;
		}
		&:active {}
	}

	&>.body {
		display: grid;
		grid-template-columns: 52% 1fr;
		grid-column-gap: 2px;
		align-items: center;
		border: 1px solid $black_2;
		border-radius: 20px;

		&:hover {
			box-shadow: 0 0 2px $gray_1;
		}

		&>input {
			background-color: transparent;
			justify-self: right;
			border: 0px;
			outline: 0;
			margin: 0;
			padding: 0;
			width: 32px;
			font: {
				size: 18px;
			}
			text-align: right;

			&:active {}
		}
		&>.suffix {}
	}
}